2 files changed, 129 insertions, 0 deletions
diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
new file mode 100644
index 0000000..8ec633f
--- /dev/null
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -0,0 +1,59 @@
+"use client";
+import styles from "../styles/info.module.css";
+import getVideoLink from "../components/videoLink";
+import React, { useState } from "react";
+import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import "@vidstack/react/player/styles/base.css";
+import "@vidstack/react/player/styles/plyr/theme.css";
+import {
+	PlyrLayout,
+	plyrLayoutIcons,
+} from "@vidstack/react/player/layouts/plyr";
+
+export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
+	const [videoLink, setVideoLink] = useState(null);
+	const [episode, setEpisode] = useState("");
+
+	async function test(a, b, episodeText) {
+		let link = await getVideoLink(a, b);
+		setVideoLink(link);
+		setEpisode(episodeText);
+	}
+
+	return (
+		<div>
+			<div className={styles.EpisodesContainer}>
+				<h2>Episodes</h2>
+				<div className={styles.EpisodeButtons}>
+					{episodeData &&
+						episodeData.map((item, index) => (
+							<button
+								key={index}
+								onClick={() =>
+									test(item.id, dramaId, item.title)
+								}
+							>
+								{item.title}
+							</button>
+						))}
+				</div>
+			</div>
+			{videoLink && (
+				<div className={styles.VideoContainer}>
+					<MediaPlayer
+						title="dramaPlayer"
+						src={videoLink}
+						aspectRatio="16/9"
+						load="eager"
+						className={styles.VideoPlayer}
+						playsInline
+					>
+						<MediaProvider />
+						<PlyrLayout icons={plyrLayoutIcons} />
+					</MediaPlayer>
+					<p>{episode.toUpperCase()}</p>
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
new file mode 100644
index 0000000..baaf24e
--- /dev/null
+++ b/src/app/kdrama/[id]/page.jsx
@@ -0,0 +1,70 @@
+import styles from "../styles/info.module.css";
+import Image from "next/image";
+import EpisodesButtons from "./buttons";
+import PreFetchVideoLinks from "../components/cacher";
+
+export default async function DramaInfo({ params }) {
+	const id = decodeURIComponent(params.id);
+	const info = await getDramaInfo(id);
+
+	PreFetchVideoLinks(info.episodes, id);
+
+	return (
+		<div className={styles.Main}>
+			{info && (
+				<div className={styles.DramaInfoContainer}>
+					<div className={styles.TitleContainer}>
+						<p>{info.title}</p>
+						<Image
+							src={info.image}
+							width={160}
+							height={240}
+							alt="Drama Poster"
+							priority
+						/>
+					</div>
+
+					{/* Drama description */}
+					<div className={styles.DramaDescription}>
+						<h2>Description</h2>
+						<p>{info.description}</p>
+					</div>
+
+					{/* Genres */}
+					<div className={styles.DramaGenre}>
+						<span className={styles.genreMain}>Genres: </span>
+						{info.genres &&
+							info.genres.map((item, index) => (
+								<span key={index} className={styles.genreEntry}>
+									{item}
+								</span>
+							))}
+					</div>
+
+					{/* Other names */}
+					<div className={styles.DramaGenre}>
+						<span className={styles.genreMain}>AKA: </span>
+						{info.otherNames &&
+							info.otherNames.map((item, index) => (
+								<span key={index} className={styles.genreEntry}>
+									{item}
+								</span>
+							))}
+					</div>
+
+					{/* Episodes Buttons */}
+					<EpisodesButtons data={info.episodes} id={id} />
+				</div>
+			)}
+		</div>
+	);
+}
+
+async function getDramaInfo(id) {
+	const res = await fetch(
+		`https://consumet-api-di2e.onrender.com/movies/dramacool/info?id=${id}`,
+		{ next: { revalidate: 86400 } }
+	);
+	const data = await res.json();
+	return data;
+}